import { OrderCount } from '@/api/order';
import { GetUserInfo } from '@/api/user';
import Tags from '@/pages/professional/components/Tags';
import { Tag } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { log } from 'console';
import { useMemo } from 'react';

import { useRequest } from 'taro-hooks';

const CHARA_MENUS = [
  {
    label: '地址管理',
    icon: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/user-other-1.svg',
    path: '/pages/expert/address/index',
  },
  {
    label: '邀请好友',
    icon: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/user-other-2.svg',
    path: '/pages/my/invite/index',
  },
  {
    label: '设置中心',
    icon: 'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/user-other-3.svg',
    path: '/pages/my/set/index',
  },
];

const DEFAULT_AVATAR =
  'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/default-avatar.jpg';

export default function Index() {
  const { data: user, refresh } = useRequest(GetUserInfo, {
    cacheKey: 'get:user:info',
  });
  //是否已登录
  const isLogin = useMemo(() => user?.id, [user]);

  const { data: orderCount } = useRequest(OrderCount);
  const allCount = useMemo(
    () =>
      Object.values(orderCount || {}).reduce(
        (accumulator, currentValue) => accumulator + currentValue,
        0
      ),
    [orderCount]
  );

  useDidShow(() => refresh());

  return (
    <View
      className=' text-white text-[24px] min-h-screen bg-cover bg-center pt-[130px]'
      style={{
        backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/my-bg.jpg)`,
      }}
    >
      <View className=' flex px-4 mb-4'>
        <Image
          src={user?.headimg || DEFAULT_AVATAR}
          mode='aspectFill'
          className=' w-[160px] h-[160px] rounded-full bg-white border-solid border-[6px] border-white shadow-lg mr-5'
        />
        <View className=' flex-1'>
          <Text className=' text-xl font-bold text-black block mt-[40px]'>
            Hello, {user?.name}
          </Text>

          {user?.tags && (
            <View className='mt-2 '>
              <Tags list={user.tags.split(',')} />
            </View>
          )}
        </View>
      </View>

      {/* 我的积分 */}
      <View
        onClick={() => {
          Taro.navigateTo({
            url: `/pages/my/integral/index`,
          });
        }}
        className=' h-[218px]  bg-cover text-black flex items-end pl-[40px] font-bold pb-[120px] leading-none'
        style={{
          backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/expert-1.png)`,
        }}
      >
        <Text className=' block text-lg'>积分</Text>
        <Text className=' text-[60px] ml-4  translate-y-[8px]'>
          {user?.points || 0}
        </Text>
      </View>

      {/* 我的服务 */}
      <View className='rounded-lg bg-white p-5 mx-[20px] relative'>
        {!isLogin && (
          <View
            className=' w-full h-full absolute left-0 top-0 z-20'
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/login/role',
              });
            }}
          ></View>
        )}

        <Text className=' block text-[#373948] text-lg mb-6'>我的服务</Text>
        <View className=' grid grid-cols-4 -mx-[20px]'>
          <View
            className='text-center'
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/professional/detail?id=${user?.id}`,
              });
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/user-service-1.svg'
              className='w-[44px] h-[44px] block mx-auto mb-2'
            />
            <Text className=' text-xs text-black'>服务主页</Text>
          </View>

          <View
            className='text-center relative'
            onClick={() => {
              Taro.navigateTo({ url: `/pages/expert/user/records/index` });
            }}
          >
            {Boolean(allCount) && (
              <Tag
                round
                type='danger'
                className=' absolute left-[90px] -top-1 px-[12px] text-white'
              >
                {allCount}
              </Tag>
            )}

            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/user-service-2.svg'
              className='w-[44px] h-[44px] block mx-auto mb-2'
            />
            <Text className=' text-xs text-black'>咨询记录</Text>
          </View>
        </View>
      </View>

      <View className='  mt-5 rounded-lg bg-white p-5 mx-[20px] relative'>
        {!isLogin && (
          <View
            className=' w-full h-full absolute left-0 top-0 z-20'
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/login/role',
              });
            }}
          ></View>
        )}
        <Text className=' block text-[#373948] text-lg mb-6'>其他</Text>
        <View className=' grid grid-cols-4 -mx-[20px]'>
          {CHARA_MENUS.map((item) => (
            <View
              key={item.path}
              className='text-center'
              onClick={() => {
                if (!item.path) return;
                Taro.navigateTo({
                  url: item.path,
                });
              }}
            >
              <Image
                src={item.icon}
                className='w-[44px] h-[44px] block mx-auto mb-2'
              />
              <Text className=' text-xs text-black'>{item.label}</Text>
            </View>
          ))}
        </View>
      </View>
    </View>
  );
}
